<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>教学楼管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        body{
            padding: 12px;
        }
    </style>
</head>
<body>


<div class="demoTable">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="searchParam" id="demoReload" autocomplete="off" placeholder="模糊搜索">
    </div>
    <button class="layui-btn layui-btn-warm" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>


<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script th:inline="javascript" type="application/javascript">


    layui.use('table', function(){
        var table = layui.table;

        // 数据表格
        table.render({
            elem: '#test'
            ,url:'campus/list'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '校区列表'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
                    ,{field: 'campusCode', title: '校区代码',  align: 'center'}
                    ,{field: 'campusName', title: '校区名称',  align: 'center'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo',  align: 'center'}
                ]
            ]
            , page: true  // 是否分页
            , limit: 10   // 默认十条数据一页
            , limits: [10, 15, 20, 25, 30, 50]  //数据分页条
        });

        // 搜索重载
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }
        };

        // 头工具栏事件
        table.on('toolbar(test)', function(obj){
            console.log(obj)
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    showAdd(); //显示编辑对话框
                    break;
                case 'delete':
                    layer.msg("delete");
                    break;
            };
        });

        // 监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            // 删除操作
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:'/campus/delete',
                        type:'get',
                        data:{'id': obj.data.id},//向服务端发送删除的id
                        success:function(suc){
                            if(  suc.code == 0 ){
                                layer.close(index);
                                obj.del();
                                layer.close(index);
                                layer.msg(suc.msg,{icon:1});
                            }
                            else{
                                layer.msg(suc.msg,{icon:5});
                            }
                        }
                    });
                });
            }
            // 编辑操作
            else if(obj.event === 'edit'){
                showEdit(data); //显示编辑对话框
            }
        });
    });

    // 添加
    function showAdd(){
        var editHtml = '<form id="form1" class="layui-form" method="POST" action="/campus/post" style="width:460px; margin-top: 20px;">\
                           <div class="layui-form-item">\
                             <label class="layui-form-label">校区代码</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="campusCode" lay-verify="title" autocomplete="off" class="layui-input">\
                             </div>\
                           </div>\
                           <div class="layui-form-item">\
                             <label class="layui-form-label">校区名称</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="campusName" lay-verify="title" autocomplete="off"  class="layui-input">\
                             </div>\
                           </div>\
                       </form>';

        layer.open({
            type: 1,
            title: '添加',
            content: editHtml,
            area: ['500px', '420px'],
            btn: ['提交', '取消'],
            yes: function (layIndex) {
                $('#form1').ajaxSubmit({
                    success: function (rsp) {
                        if ( rsp.code == 0 ) {
                            layer.msg(rsp.msg,{icon:1});
                            setTimeout(function () {
                                location.reload();
                            },1500)
                        }
                        else {
                            layer.msg(rsp.msg,{icon:5});
                        }
                    }
                });
            }
        });
    }

    // 编辑
    function showEdit(data) {
        var editHtml = '<form id="form1" class="layui-form" method="POST" action="/campus/put" style="width:460px; margin-top: 20px;">\
                           <input type="hidden" name="id" value="' + data.id + '" lay-verify="title" autocomplete="off" class="layui-input">\
                           <div class="layui-form-item">\
                             <label class="layui-form-label">校区代码</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="campusCode" value="' + data.campusCode + '" lay-verify="title" autocomplete="off" class="layui-input">\
                             </div>\
                           </div>\
                           <div class="layui-form-item">\
                             <label class="layui-form-label">校区名称</label>\
                             <div class="layui-input-block">\
                               <input type="text" name="campusName" value="' + data.campusName + '" lay-verify="title" autocomplete="off"  class="layui-input">\
                             </div>\
                           </div>\
                       </form>';

        layer.open({
            type: 1,
            title: '编辑',
            content: editHtml,
            area: ['500px', '420px'],
            btn: ['提交', '取消'],
            yes: function (layIndex) {
                $('#form1').ajaxSubmit({
                    success: function (rsp) {
                        if ( rsp.code == 0 ) {
                            layer.msg(rsp.msg,{icon:1});
                            setTimeout(function () {
                                location.reload();
                            },1500)
                        }
                        else {
                            layer.msg(rsp.msg,{icon:5});
                        }
                    }
                });
            }
        });
    }
</script>

</body>
</html>